<template>
	<view class="container">
		<!-- <CustomNavbar title="个人信息" /> -->

		<!-- 主内容区 -->
		<view class="content">
			<h4>基本信息</h4>
			<view class="ul">
				<view class="li flex-between">
					<view class="left">头像</view>
					<view class="right" @click="isClooseImg=true">
						<image :src="userInfo?.avatar || '/static/index_slices/avatar.png'"></image>
					</view>
				</view>
				<view class="li flex-between">
					<view class="left">昵称</view>
					<view class="right" @click="upData('nickname')">
						<text>{{userInfo?.nickname || userInfo?.username}}</text>
					</view>
				</view>
				<view class="li flex-between">
					<view class="left">手机号</view>
					<view class="right" @click="upData('mobile')"><text>{{userInfo?.mobile}}</text></view>
				</view>
				<view class="li flex-between">
					<view class="left">姓名</view>
					<view class="right" @click="upData('truename')"><text>{{userInfo?.truename}}</text></view>
				</view>
				<view class="li flex-between">
					<view class="left">会员等级</view>
					<view class="right"><image class="type" :src="'/static/index_slices/type' + parseInt(userInfo?.level) + '.png'"></image></view>
				</view>
			</view>
			<view class="logout" @click="logout">
				退出登录
			</view>
			<view class='mask' v-if="isLogout">
				<view class="mask-logout">
					<h3>提示</h3>
					<text>真的要退出登录嘛？</text>
					<view class="btn-box">
						<button @click="close">取消</button>
						<button @click="confirm">确定</button>
					</view>
				</view>
				
				
			</view>
		</view>
		<!-- 弹框 -->
		<view class="mask" v-if="isModify">
			<view class="mask-content">
				<view class="mask-main">
					<h3>修改{{upTitle}}</h3>
					<input type="text" :placeholder="'请输入您的' + upTitle" placeholder-class="placeholder"
						v-model="upValue" />
					<button @click="confirmModify ">确定修改</button>
				</view>
				<image src="/static/index_slices/close.png" mode="" @click="isModify=false"></image>
			</view>
		</view>
		<view class="mask" v-if="isClooseImg">
			<view class="clooseImg">
				<view class="clooseImg-main">
					<view class="btn" @click="clooseImg('album')">相册</view>
					<view class="line">

					</view>
					<view class="btn" @click="clooseImg('compressed')">拍照</view>
				</view>
				<view class="cancel">
					<button @click="isClooseImg=false">取消</button>
				</view>
			</view>
		</view>
		
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import CustomNavbar from '@/components/CustomNavbar.vue';
	const userInfo = ref()
	const upTitle = ref()
	const upValue = ref()
	const upType = ref()
	const getUserInfo = () => {
		uni.$api.user.userInfo().then(res => {
			if (res.code == 200) {
				userInfo.value = res.data
			}
		})
	}
	getUserInfo()
	const isLogout = ref(false)
	const logout = ()=>{
		isLogout.value = true
	}
	const close = ()=> {
		isLogout.value = false
	}
	const confirm = (value) => {
		// 输入框的值
		console.log(value)
		// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
		// ...
		isLogout.value = false
		
		uni.clearStorageSync()
		uni.navigateTo({
			url:'/pages/login/login'
		})
	}
	// 确认修改
	const isModify = ref(false)
	const upData = (name) => {
		isModify.value = true
		upType.value = name
		upValue.value = userInfo.value[name]
		switch (name) {
			case 'mobile':
				upTitle.value = '手机号'
				break;
			case 'truename':
				upTitle.value = '真实姓名'
			default:
				upTitle.value = '昵称'
		}


	}
	const confirmModify = () => {
		isModify.value = false
		userInfo[upType] = upValue.value
		uni.$api.user.saveProfile({code: upType.value,value: upValue.value}).then(res => {
			if(res.code == 200){
				getUserInfo()
				uni.showToast({
					title: res.msg
				})
				upValue.value = ''
			}
			
		})
	}
	// 修改图片
	const isClooseImg = ref(false)
	const clooseImg = (sourceType) => {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: [sourceType], //从相册选择
			success: (res) => {
				isClooseImg.value = false;
				userInfo.value.avatar = res.tempFilePaths[0]
				uni.$api.user.uploadAvatar({
					'file': res.tempFilePaths[0]
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功'
						})
					}

				})
			},
			fail: (err) => {
				isClooseImg.value = false;
				console.error('选择图片失败:', err)
				uni.showToast({
					title: '选择图片失败',
					icon: 'none'
				})
			},
			complete: () => {
				isClooseImg.value = false;
				// 无论成功失败都会执行，确保界面状态恢复
				console.log('选择图片操作完成')
			}
		});
		
	}
</script>
<style scoped lang="scss">
	.container {
		width: 100%;
		background: url('/static/index_slices/bg.png') no-repeat;
		background-size: 100%;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		height: calc(100vh);
		// padding-top: 28rpx;
		color: #ffffff;

		.content {
			position: fixed;
			top: 133rpx;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #fff;
			border-radius: 46rpx 46rpx 0 0;
			padding: 72rpx 44rpx;
			color: #4C5073;
			font-size: 28rpx;

			h4 {
				font-size: 32rpx;
				color: #4C5073;
			}

			.ul {
				margin-top: 35rpx;

				.li {
					height: 111rpx;
					line-height: 111rpx;

					image {
						width: 111rpx;
						height: 111rpx;
						border-radius: 50%;
					}

					.right {
						background: url('/static/index_slices/back.png') no-repeat;
						background-size: 10rpx 20rpx;
						background-position: center right;
						padding-right: 30rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						min-height: 45rpx;
						min-width: 100rpx;
						.type{
							width: 140rpx;
							height: 60rpx;
							border-radius: 0;
						}
					}
				}
			}
		}

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(34, 34, 34, 0.7);
			z-index: 999;
			.mask-logout{
				background-color: #fff;
				padding: 40rpx 0;
				border-radius: 20rpx;
				width: 660rpx;
				position: absolute;
				text-align: center;
				top: 400rpx;
				left: 45rpx;
				text{
					padding-top: 40rpx;
					font-size: 42rpx;
				}
				.btn-box{
					margin-top: 40rpx;
					display: flex;
					justify-content: center;
					button{
						width: 40%;
						margin: 0 30rpx;
						&:nth-child(2){
							background-color: #FF5A55;
							color: #fff;
						}
					}
				}
			}
			// 修改昵称
			.mask-content {
				position: absolute;
				top: 296rpx;
				left: 50%;
				transform: translateX(-50%);
				text-align: center;

				.mask-main {
					background-color: #fff;
					width: 600rpx;
					border-radius: 36rpx;
					padding: 49rpx 44rpx 64rpx;
					box-sizing: border-box;

					h3 {
						color: #181A3C;
						font-size: 36rpx;
					}

					input {
						width: 512rpx;
						height: 90rpx;
						text-align: left;
						margin-top: 53rpx;
						margin-bottom: 40rpx;
						background-color: #EDF0F5;
						border-radius: 45rpx;
						padding-left: 31rpx;
						box-sizing: border-box;
						color: #666;

						.placeholder {
							color: #666;
							font-size: 24rpx;
						}
					}

					button {
						color: #fff;
						background: linear-gradient(to right, #FF5A55, #FD3832);
						height: 78rpx;
						line-height: 78rpx;
						border-radius: 39rpx;
						font-size: 32rpx;
					}
					
				}

				image {
					margin-top: 51rpx;
					width: 48rpx;
					height: 48rpx;
				}
				
			}

			// 拍照
			.clooseImg {
				position: absolute;
				bottom: 60rpx;
				left: 30rpx;
				text-align: center;

				.clooseImg-main {
					border-radius: 26rpx;
					background-color: #fff;

					.btn {
						background-color: transparent;
						border-radius: 0;
						color: #222222;

					}

					.line {
						height: 1rpx;
						width: 630rpx;
						margin-left: 30rpx;
						background-color: #F2F2F2;
					}
				}

				button,
				.btn {
					width: 690rpx;
					color: #FD3A34;
					font-size: 32rpx;
					height: 110rpx;
					line-height: 110rpx;

				}

				.cancel {
					margin-top: 20rpx;
				}
			}
		}
		.logout{
			width: 660rpx;
			line-height: 88rpx;
			position: fixed;
			left: 45rpx;
			bottom: 60rpx;
			color: #fff;
			opacity: 0.6;
			background: linear-gradient(to right,#FF5A55,#FD3832);
			text-align: center;
			font-size: 32rpx;
			border-radius: 44rpx;
		}
	}
</style>